<template>
    <div>
        <div ref="edu" style="width: 100%;height: 300px;"></div>
        <div v-if="detailVisible" :style="panelStyle">11111111111111</div>
    </div>
</template>

<script>
    /**
     select count(iscity),iscity from d left join u on d.id =u.userid and p='360se' group by u.iscity having
     count(iscity)>0
     */
    import echarts from 'echarts'

    export default {
        name: "edu",
        data() {
            return {
                offsetX: '',
                offsetY: '',
                detailVisible: false,
                chart: null,
                iscityData: [{"edu":"初中","count":46608},{"edu":"大学本科","count":553969},{"edu":"大专","count":400983},{"edu":"高中/中专/技校","count":234179},{"edu":"硕士及以上","count":75771},{"edu":"小学及以下","count":8831}]
            }
        },
        mounted() {
            this.chart = echarts.init(this.$refs.edu);
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (val) {
                        return `${val.data.edu}：${val.data.count / 1000}千次访问`
                    }
                },
                dataset: {
                    dimensions: ['edu', 'count'],
                    source: this.iscityData
                },
                series: [
                    {
                        center: ['50%', '50%'],
                        radius: [0, '50%'],
                        type: 'pie',
                        encode: {
                            itemName: 'edu',
                            value: 'count'
                        },
                        label: {
                            formatter: function (val) {
                                if (val.data.iscity == -1) {
                                    return `未知(${val.percent}%)`;
                                }
                                return `${val.data.edu}(${val.percent}%)`
                            }
                        },
                    }
                ]
            };
            this.chart.setOption(option)
            let _this = this;
            this.chart.on('mouseover', function (e) {
                _this.offsetY = e.event.event.offsetY;
                _this.offsetX = e.event.event.offsetX;
                _this.detailVisible = true;
            });
            this.chart.on('mouseout', function (e) {
                _this.offsetY = e.event.event.offsetY;
                _this.offsetX = e.event.event.offsetX;
                _this.detailVisible = false;
            })
        },
        computed: {
            panelStyle() {
                return `width:500px;height:500px;position: fixed;left: 50%;top: ${this.offsetY}px; transform:translateX(-50%);border:2px solid yellow;`
            }

        },
    }
</script>

<style scoped>

</style>